<template>
    <div>
      <h3 style="color: cornflowerblue;">商店列表</h3>
      <div class="stores-list">
        <div v-for="(item, index) in storesList" :key="index" class="card">
          <h4>{{ item.name }}</h4>
          <p>{{ item.description }}</p>
          <p><strong>地点:</strong> {{ item.location }}</p>
          <p><strong>老板:</strong> {{ item.owner }}</p>
          <p><strong>操作员:</strong> {{ item.operator }}</p>
          <p><strong>联系电话:</strong> {{ item.contactNumber }}</p>
          <p><strong>营业时间:</strong> {{ item.operatingHours }}</p>
          <p><strong>评分:</strong> {{ item.rating }} ★</p>
          <p v-if="item.isOperating" style="color: green;"><strong>状态:</strong> 正在营业</p>
          <p v-else style="color: red;"><strong>状态:</strong> 已关闭</p>
          <button @click="enterStore(item.id)">进入商店</button>
        </div>
      </div>
  
      <div v-if="selectedStore" class="store-details">
        <div class="products-list">
          <div v-for="(product, index) in selectedStore" :key="index" class="product-card">
            <h4>{{ product.name }}</h4>
            <p><strong>价格:</strong> ¥{{ product.price }}</p>
            <p><strong>描述:</strong> {{ product.description }}</p>
          </div>
        </div>
        <button @click="selectedStore = null">返回</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, ref } from 'vue';
  import { getGoodsListByStoreId}  from "@/api/product";
  
  const props = defineProps({
    storesList: Array,
  });
  
  const selectedStore = ref(null);
  
  const enterStore = (storeId) => {
    getGoodsListByStoreId(storeId).then(res => {
        selectedStore.value = res.data;
        console.log(res.data);
    });
  };
  </script>
  
  <style scoped>
  .stores-list {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 15px;
  }
  
  .card {
    margin-bottom: 10px;
    padding: 10px;
    border: 2px solid #eee;
    border-radius: 4px;
  }
  
  .store-details {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
  }
  
  .products-list {
    max-height: 300px;
    overflow-y: auto;
  }
  
  .product-card {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  </style>